<template>
  <div>
    <!--    <img :src="images[index]" alt=""> <br>-->
    <div id="imgDiv" @mouseover="over" @mouseout="auto"><img :src="img" :width="width"></div>
    <button @click="pre">上一张</button>
    <button @click="next">下一张</button>
    <button @click="auto">自动</button>
  </div>
</template>

<script>
import t1 from "../assets/1.jpg";
import t2 from "../assets/2.png";
import t3 from "../assets/3.jpg";
import t4 from "../assets/4.png";
import t5 from "../assets/5.jpg";
//创建一个变量 用于记录定时器
var timer;
export default {
  name: "LunBo",
  data() {
    return {
      width: "250px",
      img: t1, //设置当前图片值
      images: [t1, t2, t3, t4, t5], //设置图片数组
      index: 0 // 设置图片的当前下标位置
    }
  },
  methods: {
    next() {
      this.index++;
      // 判断 当前图片下标是否已经到达最后一个
      if (this.index >= this.images.length) {
        // 如果是,设置当前图片下标为 第一张图片
        this.index = 0;
      }
      // 设置图片值
      this.img = this.images[this.index];
    },
    pre() {
      this.index--;
      //判断当前图片下标是否小于0
      if (this.index < 0) {
        //设置当前图片下标为最后一张图
        this.index = this.images.length - 1;
      }
      // 设置图片值
      this.img = this.images[this.index];
    },
    auto() {
      // 启动并接受定时器对象
      timer=setInterval(this.next, 1000)
    },
    over(){
      // 清除定时器
      clearInterval(timer);
    }
  },
  mounted() {
    this.auto();
  }
}
</script>

<style scoped>
#imgDiv {
  height: 300px;
}
</style>
